Noratetsu Houseの仕組みと技術を解説したシリーズ記事。
- コードの用意(HTML、CSS、JavaScript)
- GitHubへのアップロードとホスティングサービスでのデプロイ
- APIの使い方
- Dynalist APIの使い方
- Dynalistでのデータの書き方と利用方法
動じないために。
Noratetsu Houseの仕組みと技術を解説したシリーズ記事。
Backlinks
他の「Series」カテゴリの語句
Noratetsu Houseの作り方(概要)の続きです。
今回はホスティングサービスを実際に使ってみるところまで。
(問い合わせフォームにいただいたコメントは拝読しております。ありがとうございます!)
手順としては三つの工程があります。
手順さえ分かればあとはそれぞれキーワードで検索すればよろしいかと思いますが、多少ショートカットできるようにわかりやすそうなページを貼っていくことにします。親切な先人が労力を割いて解説してくれているわけなので、新たに書くよりそちらにアクセスしてもらった方がみんなハッピーでしょう。
HTMLとは、というところからスタートすると果てしなく話が広がってしまうので、詳しい書き方をここで解説することはしません。参考になるサイトのリンクを貼っておきます。
私もHTMLに詳しいわけではないので、これらのサイトの内容を読むとあちこちで「へえー」と思ったりします。必要な分だけその都度知っていけば良いでしょう。
さて、今回必要なのはホスティングサービスが利用できることを確認するためのファイルなので、超簡単なHTMLをサンプルとして置いておきます。表示したいファイルが既にあるならそちらをお使いください。
Sample
Hello World!
私が使っているホスティングサービスは、GitHubに作ったリポジトリ内のファイルを用いてサイトを構築します。なので、GitHubのアカウントを取得し、リポジトリを用意する必要があります。
まずアカウント取得について。
リポジトリの作成について。公式ドキュメントが十分親切なのでこれだけ貼っておきます。
リポジトリ名は適当なもので大丈夫です。また、今回使うホスティングサービスではリポジトリがPrivateでも問題ないので、とりあえず公開設定はPrivateにしておくとよいでしょう。
リポジトリを用意できたら、「index.html」を作成します。
今作ったリポジトリはこうなっています。
GitHubについてはこれで最低限の用意ができました。
ちなみに、GitHubは「GitHub Pages」という静的サイトホスティングサービスを提供しています。
あんまりあっちこっちにアカウントを作りたくないという人はこちらを試してみてもよいでしょう。ずっと使う本拠地としては頼りないですが、気軽にページを作れるので「ちょっと公開してみたい」という場合には十分かもしれません。
静的サイトのホスティングサービスとしてメジャーなのは、「Cloudflare Pages」「Netlify」「Vercel」の三つかなと思います。私はNetlifyは試したことがあり、Noratetsu HouseではCloudflare Pagesを使っています。Vercelは使ったことがありません。
Cloudflare Pagesの長所短所はこちらの記事が詳しく解説してくれています。
ホスティングサービスの比較記事や違いが見える記事はこちら。
ただし情報は最新のものとは言えません。正確な情報は適宜お調べになってください。
ここではCloudflare Pagesの導入について紹介します。
こちらの記事はわかりやすく参考になりますが、今回はHugoは使わないので、その部分だけ飛ばして読んでください。
先程作ったリポジトリで実際にサイトを作ってみましょう。GitHubのリポジトリを選択すると、このような画面に遷移すると思います。
今回できたサイトはこちらです。
以後はGitHubのファイルを更新する度に自動でサイトの内容も更新されます。ファイルが有効でないなど何らかの理由でデプロイが上手くいかなかった場合は、公開データは前バージョンのまま維持されます。
色々と機能などはありますが、最低限のところはこんな感じになります。お疲れ様でした。
サイトについてコメントをいただいたので、回答を兼ねてサイトについてもう少し詳しく書こうと思います。
問い合わせの内容についてそのまま掲載する可能性があるというような断りを事前にしていないので、差し障りがないよう要点だけ書いておくことにします。
ご感想ありがとうございます! コメントをもらえるとはあまり思っていなかったのでとても嬉しいです。
さて、まずサイトの仕組みとして根幹の方からお答えします。
サーバー周りの知識がないのでどうしたらというお話ですが、サーバーについては私もよくわかっていません! というのは、このサイトに関しては自前のサーバーでもレンタルサーバーでもなく、Cloudflare Pagesというホスティングサービス(という言い方でいいのかどうか)を利用しているからです。同種のサービスには他にNetlifyやVercelがあります。
Cloudflare Pagesは何をしてくれるのかと言うと、サイトを作るのに必要なファイル(html、css、js、favicon.ico等)をGitHubにプッシュしておけば、それを使って自動でサイトを生成して公開してくれるのです。レンタルサーバーを兼ねてくれているということになろうかと思いますが、ユーザーがサーバー周りの知識を持っていなくてもうまいことやってくれるので便利です。(知識があればより細かい設定ができます。)
つまりサイトの公開に最低限必要なのは、①html等のファイル、②GitHubのリポジトリ、③Cloudflare Pagesなどのホスティングサービスのアカウント、ということになります。
なおGitHubは本来Gitを通してファイルをアップロードするものですが、Gitを使わずにサイト上で手動でファイルを更新することもできるので、Gitの知識がなくてもサイトの公開は可能です。
各サービスのアカウント取得方法や設定方法は、検索すれば私よりずっと詳しい人の親切な解説が色々あるのでそちらをご参照ください。
同じ仕組みでサイトを作ってみたいというお話でしたが、Dynalistを使うのは結構大変かもしれないというのは予め申し上げておきます。もし全く同じようにやるとしたら以下の知識が必要となります。
ひとつひとつはそんなに難しくはないですが、ゼロから慣れるまでにはちょっとかかるかもしれません。多分絶対的にそれなりの時間がかかります。
JavaScriptとか余裕だぜヘイヘイヘーイという方向けの説明を簡単にしておきます。データの取得と変換の流れは以下の通りです。(非プログラマーなので表現が変だったらすみません。)
複雑なことは特にないと思いますが、Dynalist APIで取ってくるデータは全てのノードのデータがフラットに並んだ配列なので、記事の親ノードがどれで本文はどこからどこまでかを解釈するために工夫が必要です。私はnoteに「date:」という文字列が含まれるかどうかで親ノードを判定していますが、headingやcolorを利用するのも簡便で良いと思います。
本文を取得するのもちょっと面倒くさいですが、childrenプロパティに子ノードのidが上から順番に入っているのでそれを再帰的に処理して取得します。データには開閉状態の情報も含まれているので、畳んでいるものは子ノードを取得しないといった判定をするようにすると、没になった文は畳んでおけばよくなるので楽です。
本文はMarkdownで書いておいてmarkedでhtmlに変換しますが、それだけでは十分でない部分はreplace+正規表現で変換します。例えば自分のブログ記事のリンクをサイト内リンクに変換するなどです。markedで処理する前にやっておきます。
htmlへの変換はクライアントサイドでもいいですが、予め変換しておいたjsonを読み込んだ方が処理速度が速くなるんじゃないかなと思って事前にやっています。
なお私はひとつのjsonにまとめて出力していますが、記事単位でmdファイルにした方が使い勝手が良いという人も多いかもしれません。
「これをこうするだけで実は誰でも簡単にできるんですよ」と言ってさらっと書いてしまいたいところなのですが、どうしても簡単にはならない要素が色々あります。(私は一年九ヶ月くらいJavaScriptと格闘し続けてやっとこういうことができるレベルに到達しました。)
なので、記事一本で説明するのはちょっと無理なのですが、書き残さないと私としても勉強が財産にならないので、ステップを分解してひとつひとつ書いてみようかと思います。各ステップとしては、
こんなところでしょうか。
説明のためには私自身勉強しながら書くことになるので時間がかかると思いますが、社会の端っこにあるようなこのブログにて偶然ご縁が生まれた皆様の生活が少しでも豊かになれば私も嬉しいので、私に書けることは書いていきたいと思います。(時間的・気分的に負担にならない範囲でやりますので更新はのんびりになるでしょう。)
Marked(ライブラリ) ↩︎